<template>
  <view class="page-container">
    <!-- 会员信息区域 -->
    <view class="member-info-section">
      <view class="section-header">
        <view class="search-box">
          <input 
            type="text" 
            placeholder="输入卡号/手机号" 
            v-model="searchValue"
            class="search-input"
          />
          <button class="search-btn" @click="queryMember">查询</button>
        </view>
        <button class="scan-btn" @click="scanCard">扫一扫</button>
      </view>
      
      <!-- 会员详情 -->
      <view class="member-details" v-if="showMemberInfo">
        <view class="detail-item">
          <text class="detail-label">姓名: </text>
          <text class="detail-value">{{ memberInfo.name }}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">手机号: </text>
          <text class="detail-value">{{ memberInfo.phone }}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">卡号: </text>
          <text class="detail-value">{{ memberInfo.cardNo }}</text>
        </view>
        
        <!-- 余额信息 -->
        <view class="balance-info">
          <view class="balance-item">
            <text class="balance-label">预付款</text>
            <text class="balance-value">{{ memberInfo.prepay }}</text>
          </view>
          <view class="balance-item">
            <text class="balance-label">游戏币</text>
            <text class="balance-value">{{ memberInfo.gameCoin }}</text>
          </view>
          <view class="balance-item">
            <text class="balance-label">游乐币</text>
            <text class="balance-value">{{ memberInfo.playCoin }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 充值信息区域 -->
    <view class="recharge-section">
      <!-- 充值类型选择 -->
      <view class="recharge-type">
        <text class="section-subtitle">充值类型</text>
        <radio-group class="radio-group" :v-model="selectedType">
          <label class="radio-item">
            <radio value="prepay" color="#ff3b30" />
            <text>预付款</text>
          </label>
          <label class="radio-item">
            <radio value="gameCoin" color="#ff3b30" />
            <text>游戏币</text>
          </label>
          <label class="radio-item">
            <radio value="playCoin" color="#ff3b30" />
            <text>游乐币</text>
          </label>
        </radio-group>
      </view>
      
      <!-- 充值数量 -->
      <view class="recharge-amount">
        <text class="section-subtitle">充值数量</text>
        <input 
          type="number" 
          placeholder="输入充值数量" 
          v-model="rechargeCount"
          class="count-input"
          @input="calculateTotal"
        />
      </view>
      
      <!-- 合计金额 -->
      <view class="total-amount">
        <text class="total-label">合计金额: </text>
        <text class="total-value">¥{{ totalAmount.toFixed(2) }}</text>
      </view>
      
      <!-- 支付方式 -->
      <view class="payment-methods">
        <text class="section-subtitle">支付方式</text>
        <checkbox-group class="checkbox-group" :v-model="selectedPayMethods">
          <label class="checkbox-item" v-for="(method, index) in payMethods" :key="index">
            <checkbox 
              :value="method.value" 
              color="#ff3b30"
              :checked="method.checked"
            />
            <image :src="method.icon" class="method-icon"></image>
            <text>{{ method.name }}</text>
          </label>
        </checkbox-group>
      </view>
      
      <!-- 确定充值按钮 -->
      <button class="confirm-btn" @click="confirmRecharge">确定充值</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchValue: '', // 卡号/手机号输入值
      showMemberInfo: true, // 是否显示会员信息（默认显示示例数据）
      memberInfo: {
        name: '张三',
        phone: '152xxxxxxxxx',
        cardNo: '25896387',
        prepay: '2663.00',
        gameCoin: '2564656',
        playCoin: '454645646'
      },
      selectedType: 'prepay', // 选中的充值类型
      rechargeCount: '', // 充值数量
      totalAmount: 150.00, // 合计金额
      // 支付方式列表
      payMethods: [
        {
          name: '微信支付',
          value: 'wechat',
          icon: '/static/icons/wechat.png', // 需替换为实际图标路径
          checked: true
        },
        {
          name: '支付宝支付',
          value: 'alipay',
          icon: '/static/icons/alipay.png', // 需替换为实际图标路径
          checked: true
        },
        {
          name: '现金支付',
          value: 'cash',
          icon: '/static/icons/cash.png', // 需替换为实际图标路径
          checked: true
        },
        {
          name: '银联',
          value: 'unionpay',
          icon: '/static/icons/unionpay.png', // 需替换为实际图标路径
          checked: true
        },
        {
          name: '其他',
          value: 'other',
          icon: '/static/icons/other.png', // 需替换为实际图标路径
          checked: true
        }
      ],
      selectedPayMethods: ['wechat', 'alipay', 'cash', 'unionpay', 'other'] // 选中的支付方式
    };
  },
  mounted() {
  	uni.setNavigationBarTitle({
  		title: this.$t('title.freeRecharge')
  	});
  },
  methods: {
    // 查询会员信息
    queryMember() {
      if (!this.searchValue.trim()) {
        uni.showToast({
          title: '请输入卡号或手机号',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      // 模拟查询操作
      uni.showLoading({ title: '查询中...' });
      setTimeout(() => {
        uni.hideLoading();
        this.showMemberInfo = true; // 实际项目中根据接口返回结果处理
      }, 1000);
    },
    // 扫码功能
    scanCard() {
      uni.scanCode({
        success: (res) => {
          this.searchValue = res.result;
          this.queryMember(); // 扫码后自动查询
        },
        fail: () => {
          uni.showToast({
            title: '扫码失败',
            icon: 'none',
            duration: 2000
          });
        }
      });
    },
    // 计算合计金额
    calculateTotal() {
      // 实际项目中根据不同充值类型的单价计算
      const count = Number(this.rechargeCount) || 0;
      // 假设单价固定（示例），实际应从后端获取
      this.totalAmount = count * 1; // 简化计算，1:1比例
    },
    // 确认充值
    confirmRecharge() {
      if (!this.showMemberInfo) {
        uni.showToast({ title: '请先查询会员信息', icon: 'none' });
        return;
      }
      if (!this.rechargeCount || Number(this.rechargeCount) <= 0) {
        uni.showToast({ title: '请输入有效充值数量', icon: 'none' });
        return;
      }
      if (this.selectedPayMethods.length === 0) {
        uni.showToast({ title: '请选择支付方式', icon: 'none' });
        return;
      }
      
      // 模拟充值提交
      uni.showLoading({ title: '提交中...' });
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '充值成功',
          icon: 'success',
          duration: 2000
        });
      }, 1500);
    }
  }
};
</script>

<style scoped>
/* 页面容器100%高度 */
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
  box-sizing: border-box;
}

/* 会员信息区域 */
.member-info-section {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 25rpx;
  margin-bottom: 20rpx;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 25rpx;
  gap: 15rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  width: 140rpx;
}

.search-box {
  flex: 1;
  display: flex;
  gap: 10rpx;
}

.search-input {
  flex: 1;
  height: 70rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 26rpx;
}

.search-btn {
  width: 120rpx;
  height: 70rpx;
  line-height: 70rpx;
  background-color: #007aff;
  color: #fff;
  font-size: 26rpx;
  border-radius: 8rpx;
}

.scan-btn {
  width: fit-content;
  height: 70rpx;
  line-height: 70rpx;
  background-color: #007aff;
  color: #fff;
  font-size: 26rpx;
  border-radius: 8rpx;
}

.scan-btn::after {
  border: none;
}

/* 会员详情 */
.member-details {
  border-top: 1px solid #f5f5f5;
  padding-top: 20rpx;
}

.detail-item {
  display: flex;
  margin-bottom: 15rpx;
  font-size: 28rpx;
}

.detail-label {
  color: #666;
  width: 120rpx;
}

.detail-value {
  color: #333;
  flex: 1;
}

/* 余额信息 */
.balance-info {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
  padding-top: 20rpx;
  border-top: 1px dashed #f5f5f5;
}

.balance-item {
  text-align: center;
  flex: 1;
}

.balance-label {
  font-size: 26rpx;
  color: #666;
  display: block;
  margin-bottom: 5rpx;
}

.balance-value {
  font-size: 28rpx;
  color: #ff3b30;
  font-weight: bold;
}

/* 充值信息区域 */
.recharge-section {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 25rpx;
  flex: 1;
}

.section-subtitle {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  display: block;
  margin-bottom: 15rpx;
}

/* 充值类型选择 */
.radio-group {
  display: flex;
  gap: 40rpx;
  margin-bottom: 30rpx;
}

.radio-item {
  display: flex;
  align-items: center;
  gap: 8rpx;
  font-size: 26rpx;
  color: #333;
}

/* 充值数量输入 */
.recharge-amount {
  margin-bottom: 30rpx;
}

.count-input {
  width: 100%;
  height: 80rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 26rpx;
  box-sizing: border-box;
}

/* 合计金额 */
.total-amount {
  margin-bottom: 30rpx;
  padding: 15rpx 0;
  border-top: 1px dashed #f5f5f5;
  border-bottom: 1px dashed #f5f5f5;
}

.total-label {
  font-size: 28rpx;
  color: #666;
}

.total-value {
  font-size: 30rpx;
  color: #ff3b30;
  font-weight: bold;
}

/* 支付方式 */
.payment-methods {
  margin-bottom: 40rpx;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 10rpx;
  font-size: 26rpx;
  color: #333;
  width: 45%;
  margin-bottom: 15rpx;
}

.method-icon {
  width: 36rpx;
  height: 36rpx;
}

/* 确定充值按钮 */
.confirm-btn {
  width: 100%;
  height: 96rpx;
  line-height: 96rpx;
  background-color: #ff3b30;
  color: #fff;
  font-size: 32rpx;
  border-radius: 12rpx;
  margin-top: 20rpx;
}

/* 去除按钮默认样式 */
button::after {
  border: none;
}
</style>